import React, { useState } from 'react'
import { Modal } from 'antd'
import ProTable from '@ant-design/pro-table'
import ProTableConfig from '@/pages/Exam/Question/ProTableConfig'
import Create from '@/pages/Exam/Question/components/Create'
import { getExamQuestionDetail } from '@/services/examquestion'

function Detail (props) {
  const {
    detailModelShow,
    setDetailModelShow,
    columns,
    toolBarRender,
    typeQuestion,
    type,
    category,
    questionDetails,
    setQuestionDetails,
    subsystemId,
    DetailActionRef,
    rowSelect
  } = props

  const [loading, setLoading] = useState(false)
  const [isModalShow, setIsModalShow] = useState(false)

  /**
   * 表单请求
   * @param params
   * @param sort
   * @returns {Promise<{total, data, message: string}>}
   */
  const tableRequest = async (params, sort) => {
    setLoading(true)
    // 更改默认属性名 current
    params = JSON.parse(JSON.stringify(params).replace(/current/g, 'page'))
    let examQuestionsList = await getExamQuestionDetail(subsystemId.id, params)
    setLoading(false)

    return {
      data: examQuestionsList.data,
      message: 'success',
      total: examQuestionsList.meta.pagination.total,
    }
  }

  return (
    <Modal zIndex={1} title="子题" visible={detailModelShow} onCancel={setDetailModelShow} preserve={false}
           destroyOnClose={true} footer={null} width={1500}>
      <ProTable
        {...ProTableConfig}
        columns={columns}
        tableLayout="fixed"
        actionRef={DetailActionRef}
        loading={loading}
        rowSelection={{ ...rowSelect }}
        toolBarRender={(params) => toolBarRender}
        request={(params, sort) => tableRequest(params, sort)}
      />
      <Create
        DetailActionRef={DetailActionRef}
        typeQuestion={typeQuestion}
        isModalShow={isModalShow}
        setIsModalShow={setIsModalShow}
        type={type}
        category={category}
        questionDetails={questionDetails}
        setQuestionDetails={setQuestionDetails}
        subsystemId={subsystemId}
      />
    </Modal>
  )
}

export default Detail
